<template>
    <div>
        <div class="wrapper">
            <h2>{{listContent.title}}</h2>
            <div><strong>点赞量：{{listContent.thumpUp}}，阅读量：{{listContent.readTimes}}</strong></div>
            <div v-html="listContent.content"></div>
            <button @click.stop="thumpUp(listContent.id)">赞</button>
        </div>
    </div>
</template>

<script>
import {get} from '../utils/request';

export default {
    data(){
        return {
            listContent:''
        }
    },
    methods:{
        fillArticleContent(){
            get('/index/article/findById',{id:this.$route.query.ArticleId}).then(resp=>{
                this.listContent = resp.data;
            })
        },
        // 点赞文章
        thumpUp(id){
            console.log(id);
            get('/index/article/thumbUp',{id}).then(resp=>{
                console.log(resp.message);
                this.fillArticleContent();
            })
        }
    },
    created(){
        this.fillArticleContent()
    }
}
</script>

<style lang="scss" scoped>
.wrapper{
    h2{
        display: block;
        margin: 1em 5em;
    }
    button{
        display: block;
        width: 120px;
        height: 50px;
        margin: 0 auto;
    }
}
</style>